<template>
  <div
    class="friend-item"
    :class="active ? 'active' : ''"
    @contextmenu.prevent="showRightMenu($event)"
  >
    <div class="friend-avatar">
      <HeadImage
        :size="42"
        :name="friend.nickName"
        :url="friend.headImage"
        :online="friend.online"
      >
      </HeadImage>
    </div>
    <div class="friend-info">
      <div class="friend-name">{{ friend.nickName }}</div>
      <div class="friend-online">
        <i
          class="el-icon-monitor online"
          v-show="friend.onlineWeb"
          title="电脑设备在线"
        >
          <Monitor width="16" />
          <span class="online-icon"></span>
        </i>

        <i
          class="el-icon-mobile-phone online"
          v-show="friend.onlineApp"
          title="移动设备在线"
        >
          <Iphone width="16" />
          <span class="online-icon"></span>
        </i>
      </div>
    </div>
    <RightMenu ref="rightMenuRef" @select="onSelectMenu"></RightMenu>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { Monitor, Iphone } from "@element-plus/icons-vue";
const props = defineProps({
  active: {
    type: Boolean,
  },
  friend: {
    type: Object,
  } as any,
  menu: {
    type: Boolean,
    default: true,
  },
});
const rightMenuRef = ref(null);
const menuItems = reactive([
  {
    key: "CHAT",
    name: "发送消息",
    icon: "el-icon-chat-dot-round",
  },
  {
    key: "DELETE",
    name: "删除好友",
    icon: "el-icon-delete",
  },
]);

function showRightMenu(e: any) {
  if (props.menu) {
    rightMenuRef.value.open(e, menuItems);
  }
}
function onSelectMenu(item: any) {
  //   this.$emit(item.key.toLowerCase(), this.msgInfo);
}
</script>

<style scope lang="scss">
.friend-item {
  height: 50px;
  display: flex;
  position: relative;
  padding: 5px 10px;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;

  &:hover {
    background-color: var(--im-background-active);
  }

  &.active {
    background-color: var(--im-background-active-dark);
  }

  .friend-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .friend-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    text-align: left;

    .friend-name {
      font-size: var(--im-font-size);
      white-space: nowrap;
      overflow: hidden;
    }

    .friend-online {
      .online {
        font-weight: bold;
        padding-right: 2px;
        font-size: 16px;
        position: relative;
      }

      .online-icon {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 6px;
        height: 6px;
        background: limegreen;
        border-radius: 50%;
        border: 1px solid white;
      }
    }
  }
}
</style>
